$(function() {
    // 引入layui模块
    let layer = layui.layer;
    let form = layui.form;
    // 获取链接数据
    function getLink() {
        $.ajax({
            url: 'admin/links',
            success: function(res) {

                let htmlStr = template('linkList',res)
                
                $('tbody').html(htmlStr)
            }
        })
    }
    getLink();

    // 添加友情链接
    $('a.addLink').on('click', function(e) {
        e.preventDefault();
        
        template('linkMsg', )
        let add = layer.open({
            title: '添加友情链接',
            area: '500px',
            type: 1, 
            content: $('#linkMsg').html(), 
        });

        // 文件域,模拟点击上传图片
        $('#addpic').on('click',function() {
            $('input.add_pic').click()
        })
        // 图片缩略图
        $('body').on('change','.add_pic',function (e) {
            let file = e.target.files[0]
            let newImgURL = URL.createObjectURL(file);
            $('.small_pic').show().attr('src', newImgURL);
        })

        // 提交表单数据
        $('#addLink').on('submit',function(e){
            e.preventDefault();
            let fd = new FormData(this);
            // // 获取图片
            let linkicon = $('input.add_pic')[0].files[0];
            fd.append('linkicon', linkicon)
            $.ajax({
                type: 'post',
                url: 'admin/links',
                data: fd,
                processData: false,
                contentType: false,
                success: function(res) {
                    if(res.status !== 0) {
                        return layer.msg('添加失败!')
                    }
                    layer.close(add);
                    layer.msg('添加成功')
                    getLink();
                }
            })
            // 重新获取列表
            
        })
    })

    // 编辑功能
    $('body').on('click','.edit_btn',function() {
        let edit = layer.open({
            title: '编辑友情链接',
            area: '500px',
            type: 1, 
            content: $('#editMsg').html(), 
        });
        $.ajax({
            url: 'admin/links/' + $(this).attr('data-id'),
            success: function(res) {
                
                form.val("editForm", res.data);
            }
        })
        // 模拟点击文件域
        $('#edit_pic').on('click',function() {
            $('input.edit_pic').click()
 
        })
        // 图片缩略图
        $('body').on('change','.edit_pic',function (e) {
            let file = e.target.files[0]
            let newImgURL = URL.createObjectURL(file);
            $('.small_pic_edit').show().attr('src', newImgURL)
        })

        // 提交表单数据
        $('#editForm').on('submit',e => {
            e.preventDefault();

            let fd = new FormData($('#editForm')[0]);
            
            // 获取图片
            let linkicon = $('.edit_pic')[0].files[0];
            fd.append('linkicon', linkicon);

            $.ajax({
                type: 'put',
                url: 'admin/links/' + $(this).attr('data-id'),
                data: fd,
                processData: false,
                contentType: false,
                success: function(res) {
                    if(res.status !== 0) {
                        layer.msg('修改失败!')
                    }
                    layer.close(edit);

                    getLink();
                }
            })
            // 重新获取列表
            
        })


    })


    // 删除功能
    $('body').on('click','.del_btn', function() {
        // console.log($(this).attr('data-id'));

        $.ajax({
            type: 'delete',
            url: 'admin/links/' + $(this).attr('data-id'),
            success: function(res) {
                if(res.status === 0) {
                    layer.msg(res.message);
                    getLink();
                }else {
                    layer.msg('删除失败');
                }
            }
        })

    })


})




